<template>
    <div class="rx-mobile-button-box">
        <div class="rx-mobile-grid-box">
            <div class="rx-mobile-grid-toolbar">
                <a-button type="primary" @click="addTab">{{$ti18('rxList.add', '新增')}}</a-button>
                <a-button class="rx-modile-del" @click="remove">{{$ti18('rxList.delBtn','删除')}}</a-button>
            </div>
            <div class="rx-mobile-grid-container">
                <rx-grid
                    ref="rxTable"
                    :dataSource="gridData"
                    :columns="columns"
                    :allowRowSelect="true"
                    :multiSelect="true"
                    :showPage="false"
                    :bordered="true"
                    :enableHtmlEscape="false"
                    :heightAuto="true"
                >
        <span slot="tabName" slot-scope="{text,record,index}">
            <a-input-group class="tabNavNameGroup" compact style="width:100%">
              <a-input class="tabNavNameInput" v-model="record.tabName_name" :disabled="true"/>
              <a-button class="tabNavNameButton" @click="openTabTree(text,record)" >·&nbsp;·&nbsp;·</a-button>
            </a-input-group>
        </span>
                    <span slot="treeId" slot-scope="{text,record,index}">
          <a-input v-model="record.treeId" />
        </span>
                    <span slot="onnodeclick" slot-scope="{text,record,index}">
          <a-input v-model="record.onnodeclick" />
        </span>
                    <span slot="paramName" slot-scope="{text,record,index}">
          <a-select style="width:100%;" v-model="record.paramName" :options="paramData"></a-select>
        </span>
                    <span slot="onlySelLeaf" slot-scope="{text,record,index}">
                        <a-radio-group v-model="record.onlySelLeaf" >
                            <a-radio value="YES">{{$comi18('formDef.yes', '是')}}</a-radio>
                            <a-radio value="NO">{{$comi18('formDef.no', '否')}}</a-radio>
                        </a-radio-group>
                        </span>
                </rx-grid>
            </div>
        </div>
    </div>
</template>

<script>
    import {RxGrid} from "@lowcode/jpaas-common-lib";
    import FormCustomQueryApi from "../../../../../api/form/core/formCustomQuery";
    export default {
        name: "mobileTreeTab",
        components:{
            RxGrid
        },
        computed: {
            paramData: function () {
                var parent=this;
                while(!parent.isRoot){
                    parent=parent.$parent;
                }
                var data = parent.$refs.search.getData();
                var ary=data.success?data.data.mobileSearch:[];
                var tmp = [];
                ary.map(field => {
                    if (field.type == 'income') {
                        var obj = {label: field.fieldLabel, value: field.fieldName};
                        tmp.push(obj);
                    }
                });
                return tmp;
            }
        },
        data(){
            return {
                vm:null,
                columns:[
                    {title: this.i18n('form.tabName','导航Tab名称'),width:100, dataIndex: 'tabName', scopedSlots: {customRender: 'tabName'}},
                    {title: this.i18n('form.treeID','树ID'),width:100, dataIndex: 'treeId',  scopedSlots: {customRender: 'treeId'}},
                    {title: this.i18n('form.clickEvent','点击事件'),width:100, dataIndex: 'onnodeclick',  scopedSlots: {customRender: 'onnodeclick'}},
                    {title: this.i18n('form.paramName','参数名称'),width:100, dataIndex: 'paramName', scopedSlots: {customRender: 'paramName'}},
                    {title: this.i18n('form.valueField','值字段'),width:100, dataIndex: 'idField'},
                    {title: this.i18n('form.showFiled','显示字段'),width:100, dataIndex: 'textField'},
                    {title: this.i18n('form.parentField','父ID字段'),width:100, dataIndex: 'parentField'},
                    {title: this.i18n('form.leafNode','仅选择叶子节点'),width:100, dataIndex: 'onlySelLeaf',scopedSlots: {customRender: 'onlySelLeaf'}},
                ],
                gridData:[]
            }
        },
        methods:{
            i18n(name, text, key) {
                return this.$ti18(name, text, "formEditMobile", key);
            },
            setData(vm,data){
                this.gridData.length=0;
                this.vm=vm;
                this.gridData.push(...(data.mobileTreeTab || []));
            },
            getData(){
                var data=this.$refs.rxTable.getData();
                return {success:true,data:{mobileTreeTab:data}};
            },
            addTab(){
                this.$refs.rxTable.addRow({tabName:'',treeId:'',onnodeclick:'',paramName:'',idField:'',textField:'',parentField:''});
            },
            remove(){
                var table=this.$refs.rxTable;
                table.removeRows();
                table.selectedRowKeys=[];
                table.selectedRows=[];
                this.$forceUpdate();
            },
            openTabTree(text,record){
                this.vm.openTabTree(text,record);
            }
        }
    }
</script>

<style scoped>
    .rx-mobile-grid-toolbar{
        padding-bottom:10px;
    }
    .rx-mobile-grid-toolbar button{
        margin-right: 6px;
    }
    .rx-mobile-grid-toolbar .rx-modile-del:hover{
        background-color: #ff4d4f;
        border-color: #ff4d4f;
        color: #fff;
    }
    .rx-mobile-grid-box{
        margin-bottom: 40px;
    }
</style>